import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Table, Popconfirm, message, Empty } from 'antd';
import { deleteScanRate } from '@api/task';
import PortSettingModal from '../scan-speed-modal';
import './index.less';

const prefixCls = 'port-manage-table';

const PortManageTable = props => {
  const [portManageModalVisible, setPortManageModalVisible] = useState(false);
  const [detail, setDetail] = useState({});
  const { pagination, data, getScanRateList, onTableChange, loading } = props;
  const getDeleteScanRate = body => {
    deleteScanRate(body)
      .then(() => {
        getScanRateList();
        message.success('删除成功');
      })
      .catch(() => {
        message.erroe('删除失败');
      });
  };
  const changeModalVisible = (visible, record) => {
    setPortManageModalVisible(visible);
    setDetail(record);
  };
  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
      width: '15%'
    },
    {
      title: '最大连接并发数',
      dataIndex: 'maximumConnection',
      width: '10%',
      render: maximumConnection => {
        return maximumConnection === 0 ? '不限制' : maximumConnection + '万';
      }
    },
    {
      title: '扫描带宽',
      dataIndex: 'scanBandwidth',
      width: '10%',
      render: scanBandwidth => {
        return scanBandwidth === 0 ? '不限制' : scanBandwidth + 'Kbps';
      }
    },
    {
      title: '类型',
      dataIndex: 'isDefault',
      width: '5%',
      render: isDefault => {
        return isDefault ? '系统默认' : '自定义';
      }
    },
    {
      title: '操作',
      dataIndex: 'operations',
      width: '15%',
      render: (operations, record) => {
        return (
          <div>
            <a
              onClick={() => !record.isDefault && changeModalVisible(true, record)}
              style={{ color: record.isDefault ? 'rgba(0, 0, 0, 0.25)' : null }}
            >
              编辑
            </a>
            <Popconfirm
              placement="bottomRight"
              title={'确定删除吗'}
              disabled={record.isDefault}
              onConfirm={() => getDeleteScanRate({ scanRateId: record._id })}
              okText="确定"
              cancelText="取消"
            >
              <a
                className={{ disabled: record.isDefault }}
                style={{ marginLeft: 10, color: '#F04038' }}
              >
                删除
              </a>
            </Popconfirm>
          </div>
        );
      }
    }
  ];

  return (
    <div className={`${prefixCls}`}>
      <Table
        columns={columns}
        pagination={pagination}
        dataSource={data}
        onChange={onTableChange}
        loading={{ spinning: loading, tip: '加载中' }}
        locale={{
          emptyText: (
            <Empty description={loading ? ' ' : '暂无数据'} image={Empty.PRESENTED_IMAGE_SIMPLE} />
          )
        }}
      />
      <PortSettingModal
        modalVisible={portManageModalVisible}
        changeModalVisible={changeModalVisible}
        getScanRateList={getScanRateList}
        detail={detail}
      />
    </div>
  );
};

PortManageTable.propTypes = {
  onTableChange: PropTypes.function,
  changeModalVisible: PropTypes.function,
  total: PropTypes.number,
  data: PropTypes.array,
  pagination: PropTypes.object,
  getScanRateList: PropTypes.function,
  loading: PropTypes.boolean
};

export default PortManageTable;
